import React, { Component } from 'react';


class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            sCls:'first'
        }
    }
    changeFu(sCls){
        this.setState({
            sCls:sCls
        })
    }
    render(){
        return(
            <div className="m600">
                <ul className="k_hf clearfix">
                    <li onClick={()=>{this.changeFu('first')}}>红</li>
                    <li onClick={()=>{this.changeFu('two')}}>黄</li>
                    <li onClick={()=>{this.changeFu('three')}}>蓝</li>
                    <li onClick={()=>{this.changeFu('four')}}>绿</li>
                    <li onClick={()=>{this.changeFu('five')}}>紫</li>
                </ul>
                <div className={`k_hf_con ${this.state.sCls}`}>
                    <div className="page1">页面1、div width 200px; bg 红色</div>
                    <div className="page2">页面2  div 隐藏  p width 200px;  bg 绿色</div>
                    <p className="page2">页面2p width 200px;  bg 绿色</p>
                    <div className="page3">页面3  div 隐藏  p 隐藏  h3 width 200px;  bg 紫色</div>
                    <h3 className="page3">页面3 h3 width 200px;  bg 紫色</h3>
                    <div className="page4">页面4  div width 200px;  bd 红色</div>
                    <div className="page5">页面5  div width 200px; heihgt:200px;  bd blue</div>
                </div>
            </div>
        )
    }
}
export default View;
